<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<view class="d-p-l-30 d-p-r-30" v-if="list.length > 0">
			<view class="d-flex d-col-top">
				<u-image :src="info.court_pic" radius="10rpx" width="154rpx" height="154rpx"></u-image>
				<view class="d-flex-1 d-m-l-20">
					<view class="d-font-28">{{ info.venue_name }}</view>
					<view class="d-font-24 d-be d-m-t-10">{{ info.court_name }}</view>
				</view>
			</view>

			<view class="d-flex d-flex-wrap">
				<view class="d-text-center sels d-m-t-30" v-for="(item, index) in selectTimeList" :key="index">
					<view class="d-font-24 d-flex d-row-center h">{{ item.date }}</view>
					<view class="d-font-24 d-flex d-row-center b">
						<view>
							<view>{{ item.field_name }}</view>
							<view>{{ item.start_time }}-{{ item.end_time }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="d-m-t-30">
				<view class="d-font-32 d-main">购买须知</view>
				<view class="d-font-28 d-m-t-10"><u-parse :content="info.purchase_des"></u-parse></view>

				<!-- <view class="d-font-28 d-bold d-m-t-20">有效期</view>
				<view class="d-66 d-font-26">·2023-03-13</view>

				<view class="d-font-28 d-bold d-m-t-20">使用时段</view>
				<view class="d-66 d-font-26">·购票当日，以场馆开放时间为准</view>

				<view class="d-font-28 d-bold d-m-t-20">使用规则</view>
				<view class="d-66 d-font-26">·无需预约，每张票限一人使用</view> -->
			</view>
		</view>
		<d-agent :show="show.agent" title="用户须知" :content="info.user_instruction" @confirm="show.agent = false"></d-agent>

		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<view class="d-flex">
					<u-checkbox-group size="24rpx" v-model="agent" shape="circle" active-color="#59A0FF">
						<u-checkbox label="我已同意和接受" name="ok" label-size="25rpx" label-color="#999999"></u-checkbox>
					</u-checkbox-group>
					<text class="d-font-24" @click="show.agent = true">《用户须知》</text>
				</view>
				<view class="d-m-t-30 d-flex">
					<view class="d-flex-1 d-font-30">
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red">{{ totalPrice }}</text>
					</view>
					<view>
						<u-button
							type="primary"
							shape="circle"
							:custom-style="{
								height: '80rpx',
								width: '240rpx',
								fontSize: '30rpx',
								background: '#59A0FF'
							}"
							@click="viewPay"
						>
							立即预约
						</u-button>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script>
import { getCourtProduct } from '@/common/api';
export default {
	data() {
		return {
			id: '',
			show: {
				agent: false
			},
			list: [],
			info: {},
			selectTimeList: [],
			agent: ['ok'],
			member_id:'',
			member_type:''
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.member_id = e.member_id;
		this.member_type = e.member_type;
		this.selectTimeList = uni.getStorageSync('selectTimeList');
		console.log(this.selectTimeList,'this.selectTimeList')
	},
	computed: {
		totalPrice() {
			let total = this.selectTimeList.reduce((total, item) => {
				return Number(total) + Number(item.time_price);
			}, 0);
			return total.toFixed(2);
		}
	},
	methods: {
		getData() {
			getCourtProduct({
				params: {
					product_id: this.id
				}
			})
				.then(res => {
					this.$refs.paging.complete([res.result]);
					this.info = res.result;
				})
				.catch(err => {
					this.$ref.paging.complete(false);
				});
		},
		viewPay() {
			if (!this.agent.length) {
				uni.$u.toast('请先同意用户须知');
				return;
			}
			uni.$u.route({
				url: '/pages/index/viewPay',
				// type: 'redirectTo',
				params: {
					id: this.id,
					member_id:this.member_id,
					member_type:this.member_type
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.d-tag {
	background: #f3f3f3;
	border-radius: 4rpx;
	height: 36rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	padding: 0 18rpx;
}
.d-be {
	color: #bebebe;
}
.d-red {
	color: #ff4105;
}
.d-bold {
	font-weight: bold;
}

.minus,
.plus {
	width: 38rpx;
	height: 38rpx;
	background: #f3f3f3;
}
.input {
	width: 64rpx;
	font-size: 28rpx;
}

.d-notice {
	background-color: #f6f6f6;
	margin: 0 -30rpx;
}

.d-main {
	color: #59a0ff;
}
.d-66 {
	color: #666;
}

.sels {
	width: 186rpx;
	min-width: 186rpx;
	height: 127rpx;
	background: #f3f3f3;
	border-radius: 10rpx;
	margin-right: 30rpx;
	position: relative;
	.close {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: -18rpx;
		top: -18rpx;
	}
	.h {
		height: 34rpx;
		background: #59a0ff;
		border-radius: 10rpx 10rpx 0 0;
		color: #fff;
	}
	.b {
		height: 83rpx;
	}
}
</style>
